<template>
    <div class="g-mymusic" style="height: 912px;">
        <div class="g-bd3 p-mymusic clear-block" style="min-height: 912px;">
            <AsideMusic :myPlayListData="myPlayListData"></AsideMusic>

            <div class="g-mn3 f-pr ">
                <div class="f-pr">
                    <div class="top-inner">
                        <TopInfo v-bind="mySongListDataFromDataBase.topInfo"></TopInfo>
                    </div>
                    <SongListWrap :songListInfo="mySongListDataFromDataBase.songListInfo"></SongListWrap>
                </div>

            </div>
        </div>

    </div>

</template>
<script setup>
import myPlayListData from '@/json_data/my_play_list_data.json'
import AsideMusic from './components/AsideMusic.vue';
import TopInfo from '../../components/TopInfo.vue';
import SongListWrap from '../../components/SongListWrap.vue';

import mySongListData from '@/json_data/my_song_list.json'
import {onBeforeRouteLeave } from 'vue-router';
import { useMusicStore } from '../../stores/music';
import { reactive } from 'vue';
const musicStore = useMusicStore();
const mySongListDataFromDataBase = reactive({})
onBeforeRouteLeave((to, from, next) =>{
    document.body.style.overflow = "";
    next();
})
musicStore.fetchMySongList().then(()=>{
    Object.assign(mySongListDataFromDataBase,musicStore.$state.my_song_list);
    console.log(mySongListDataFromDataBase);
})



</script>

<style lang="scss" scoped>

.g-mymusic {
    overflow-x: hidden;
    overflow-y: scroll;
    position: relative;
    zoom: 1;

 

}
</style>